<template>
  <div class="addr-checking-detail">
    <!-- 地址校验右侧详情 -->
    <div class="right" :style="isExpand ? 'width: 600px;max-width: 755px;':''">
      <div class="right-top">
        <div
          class="right-address"
        >{{$store.state.currentTargetAddrInfo ? $store.state.currentTargetAddrInfo.target_address : ''}}</div>
        <el-button
          class="right-btn"
          size="mini"
          type="primary"
          v-if="$store.state.currentTargetAddrInfo && $store.state.currentTargetAddrInfo.target_address"
          @click="positioningManualFun"
        >手动定位</el-button>
        <div class="addr-check-expand">
          <img
            :src="isExpand ? ss : zk"
            alt="ss"
            style="width:24px;height:24px;"
            @click="isExpand = !isExpand"
          />
        </div>
      </div>
      <div class="right-bottom">
        <el-table :data="tableData" @selection-change="rightHandleSelectionChange" border stripe>
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="obj_number" label="对象编号"></el-table-column>
          <el-table-column prop="obj_name" label="对象名称" show-overflow-tooltip></el-table-column>
          <template v-if="isExpand">
            <el-table-column prop="source_address" label="原地址" show-overflow-tooltip></el-table-column>
            <el-table-column prop="details" label="详情" show-overflow-tooltip>
              <template slot-scope="scope">
                <p class="textyc">{{scope.row.details}}</p>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="editAddressShowFunc([scope.row.id])"
                >更改目标地址</el-button>
              </template>
            </el-table-column>
          </template>
        </el-table>

        <div
          class="cr-bottom"
          style="align-items: flex-end;padding: 10px 10px;box-sizing:border-box;"
        >
          <div class="crb-left">
            <span
              class="clb-choose"
              style="margin-left: 6px;"
              v-if="rightMultipleSelection.length > 0"
            >
              已选择
              <span style="color: #E6A23C">{{rightMultipleSelection.length}}</span>项
            </span>
            <el-button
              type="primary"
              size="mini"
              @click="editAddressShowFunc(rightMultipleSelection)"
            >更改目标地址</el-button>
          </div>
          <el-pagination
            :pager-count="5"
            small
            layout="prev, pager, next"
            @current-change="pageChange"
            :total="pager.total_num"
          ></el-pagination>
        </div>
      </div>
    </div>

    <!-- 手动定位 dialog positioningManualWinShow -->
    <addrHandCheckWin
      :visible.sync="positioningManualWinShow"
      :onOk="(e) => closeDialog('positioningManualWinShow', e)"
      :confirmSubmit="(e) => positioningManualWinConfirm(e)"
    ></addrHandCheckWin>

    <!-- 更改目标地址 dialog editAddressDialogShow -->
    <addrChangeWin
      :visible.sync="editAddressDialogShow"
      :onOk="editAddressCallback"
      :names="targetOldAddrNames"
      :tarAddrOptions="targetOptions"
      ref="addrChangeWinRef"
    ></addrChangeWin>
  </div>
</template>

<script>
import ss from "@/icons/ss.png";
import zk from "@/icons/zk.png";
import addrHandCheckWin from "../addrCheck/addrHandCheckWin";
import addrChangeWin from "../addrCollect/addrChangeWin";

export default {
  components: {
    addrHandCheckWin,
    addrChangeWin,
  },
  data() {
    return {
      ss,
      zk,
      isExpand: false,
      positioningManualWinShow: false,
      editAddressDialogShow: false,
      rightMultipleSelection: [],
      targetOldAddrNames: [],
      targetOptions: [],
      tableData: [],
      pager: {
        page: 1,
        limit: 10,
        total_num: 0,
      },
    };
  },
  mounted() {
    this.getList();
  },
  watch: {
    "$store.state.currentTargetAddrInfo": {
      deep: true,
      handler(val, oldval) {
        console.log("test currentFileInfo");
        if (JSON.stringify(val) !== JSON.stringify(oldval)) {
          this.getList();
        }
      },
    },
    "$store.state.currentFileInfo": {
      deep: true,
      handler(val, oldval) {
        console.log("test currentFileInfo");
        if (JSON.stringify(val) !== JSON.stringify(oldval)) {
          this.getList();
        }
      },
    },
  },
  methods: {
    pageChange(e) {
      this.pager.page = e;
      this.getList();
    },
    async getList() {
      console.log("监听到了 开始重新发起请求~");
      const res = await this.axios.post(this.apis.addressDataQuery, {
        import_file_record_id: this.$store.state.currentFileInfo.id,
        target_address:
          (this.$store.state.currentTargetAddrInfo &&
            this.$store.state.currentTargetAddrInfo.target_address) ||
          undefined,
        page: this.pager.page,
        limit: this.pager.limit,
      });
      console.log(res, "res");
      if (res.retCode === 2000) {
        this.tableData = res.rows.items;

        this.pager.total_num = res.rows.total_num;

        let dataSource = this.handleMapPoints(res.rows.items)
        console.log(dataSource, 'dataSource');
        this.$store.commit(
          "setMapPoints",
          dataSource
        );
      }
    },
    handleMapPoints(arr){
      if (this.$store.state.currentBtnType == 'only' || this.$store.state.currentBtnType == 'more') {
        arr = arr.filter(item => item.is_sure_standard_address == '否')
      }
      return arr.map((item) => ({
        ...item,
        id: item.id,
        addr: item.standard_address,
        detailaddr: item.details,
        point: [item.lng, item.lat],
        isCheck: false,
      }))
    },
    positioningManualFun() {
      this.positioningManualWinShow = true;
    },
    closeDialog(dialogStr) {
      this[dialogStr] = false;
    },
    positioningManualWinConfirm(c) {
      console.log(e, "ee");
    },
    rightHandleSelectionChange(val) {
      console.log("rightHandleSelectionChange");
      this.rightMultipleSelection = val.map((item) => item.id);
    },
    editAddressCallback(e){
      this.closeDialog('editAddressDialogShow', e);
      this.getList()
      this.$parent.$children[1].getList()
    },

    async editAddressShowFunc(ids) {
      if (!ids.length) {
        this.$message.warning("请先选择想要更改的对象");
        return;
      }
      this.$refs.addrChangeWinRef.editIds = ids
      this.editAddressDialogShow = true;
      let names = [];
      this.tableData.forEach((it1) => {
        ids.forEach((it2) => {
          if (it1.id === it2) {
            names.push(it1.target_address);
          }
        });
      });
      console.log(names, "mnames");
      this.targetOldAddrNames = names;
      this.targetOptions = await this.getTargetOptions();
      console.log(ids);
    },
    async getTargetOptions(){
      const res = await this.axios.post(this.apis.addressDataGroupingStatistics, {
        import_file_record_id: this.$store.state.currentFileInfo.id,
        // address_type: this.$store.state.currentBtnType,
        page: 1,
        limit: 100,
      });
      console.log('tarAddrOptions', res);

      return res.rows.items.map((item, i) => ({
        ...item,
        id: new Date().getTime() + i,
        name: item.target_address,
        isChecked: false,
      }));
    },
    addrChangeWinConfirmSubmit() {
      console.log("addrChangeWinConfirmSubmit");
    },
  },
};
</script>

<style lang="less">
.addr-checking-detail {
  .right {
    position: absolute;
    top: 0;
    right: 0;
    width: 320px;
    height: 100%;
    border: 1px solid #ececec;
    background-color: #f4f4f4;
    z-index: 1000;
    .right-top {
      display: flex;
      justify-content: space-between;
      padding: 10px;
      position: relative;
      .addr-check-expand {
        position: absolute;
        top: 10px;
        left: -25px;
        cursor: pointer;
      }
    }
    .right-address {
      font-size: 14px;
      font-weight: 600;
    }
    .right-btn {
      padding: 5px;
    }
    .right-bottom {
      // width: auto;
      .el-table__header-wrapper .el-table__cell {
        padding: 10px 0;
        font-size: 12px;
      }
      .el-table__body-wrapper .el-table__cell {
        padding: 10px 0;
        font-size: 10px;
      }

      th.el-table__cell {
        background-color: rgba(245, 247, 250, 1);
      }
    }
  }
}
</style>
